import bb.cascades 1.2
import bb.WebImageView 1.4
import "../lib"

Container {
    property alias image: webImage.url
    property alias title: titleText.text
    property alias desc: descText.text
    property alias itemIndex: itemIndex.text
    property bool isShow: false
    signal isShowChanged(bool show)
    
    preferredWidth: style.screenWidth
    preferredHeight: style.screenHeight
    
    gestureHandlers: [
        TapHandler {
            onTapped: {
                isShow = ! isShow
                isShowChanged(isShow)
            }
        }
    ]
    
    layout: DockLayout {
    }
    
    Container {
        verticalAlignment: VerticalAlignment.Center
        horizontalAlignment: HorizontalAlignment.Center
        
        WebImageViewLoader {
            id: webImage
            height: style.screenHeight
            width: style.screenWidth
        }
    }
    
    Container {
        verticalAlignment: VerticalAlignment.Fill
        horizontalAlignment: HorizontalAlignment.Fill
        opacity: 0.7
        visible: isShow
        background: Color.Black
    }
    
    Container {
        verticalAlignment: VerticalAlignment.Top
        horizontalAlignment: HorizontalAlignment.Fill
        
        layout: DockLayout {
        }
        
        Container {
            visible: isShow
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Left
            Label {
                multiline: true
                id: titleText
            }
        }
        
        Container {
            visible: isShow
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Right
            Label {
                id: itemIndex
            }
        }
    }
    
    Container {
        verticalAlignment: VerticalAlignment.Bottom
        horizontalAlignment: HorizontalAlignment.Fill
        
        bottomPadding: 120
        layout: DockLayout {
        }
        
        Container {
            id: descCon
            visible: isShow&&descText.text!=""
            verticalAlignment: VerticalAlignment.Center
            Label {
                multiline: true
                id: descText
            }
        }
    }
    attachedObjects: [
        Common {
            id: style
        }
    ]
}
